<template>
  <!-- 复查记录（不合格）-- 复查详情  /  申诉详情 -- 查看复查详情 -->
  <view class="nonRecord">
    <view class="bgColor"></view>

    <view class="wrapper" :class="isReceipt == 0 && reviewFlag && ['mini'].includes(role) ? 'wrapper-audit' : ''">
      <view class="blueTitle">
        {{ detail.companyMessageInfo.companyName || "" }}
      </view>

      <view class="wrapper-item wrapper-zero">
        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">标准地址：</view>
            <view class="value valueName">
              {{ detail.companyMessageInfo.standardAddress || "" }}
            </view>
          </view>
          <!-- <view class="facility-item">
            <view class="textAlign label">详细地址：</view>
            <view class="value valueName">
              {{ detail.companyMessageInfo.addressDetail || "" }}
            </view>
          </view> -->
          <view class="facility-item">
            <view class="textAlign label">所属行业：</view>
            <view class="value valueName">
              {{ detail.companyMessageInfo.industryInformationName || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label watuo">负责人姓名：</view>
            <view class="value valueName">
              {{ detail.companyMessageInfo.dutyPersonName }}-{{
                detail.companyMessageInfo.dutyPersonMobile
              }}
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-barBlur">
          <view class="wrapper-bartitle"> 复查民警 </view>
        </view>
        <view class="wrapper-body">
          <view class="text-picture">
            <view class="lt">
              <view class="wrapper-facility">
                <view class="facility-item">
                  <view class="textAlign label label-recheck">所属辖区</view>
                  <i class="label-i">：</i>
                  <view class="value valueName">
                    {{ detail.policeCheckTaskInfo.jurisdictionName || "" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label label-recheck">复查民/辅警</view>
                  <i class="label-i">：</i>
                  <view class="value valueName">
                    {{ detail.policeCheckTaskInfo.policeUserName || "" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label label-recheck">警号</view>
                  <i class="label-i">：</i>
                  <view class="value valueName">
                    {{ detail.policeCheckTaskInfo.policeUserNo || "暂无" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label label-recheck">陪同民/辅警</view>
                  <i class="label-i">：</i>
                  <view class="value valueName">
                    <block v-for="(fu, fuindex) in detail.policeCheckTaskInfo
                        .policeCheckTaskAuxiliaryInfoList" :key="fuindex">
                      {{ fu.policeUserName }}
                      <block v-if="
                          detail.policeCheckTaskInfo
                            .policeCheckTaskAuxiliaryInfoList.length > 1 &&
                          fuindex + 1 !=
                            detail.policeCheckTaskInfo
                              .policeCheckTaskAuxiliaryInfoList.length
                        ">、
                      </block>
                    </block>
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label label-recheck">签到照片</view>
                  <i class="label-i">：</i>
                  <view class="value valueName look" @click="
                      pvwImage([
                        imgPrefix + detail.policeCheckTaskInfo.signPicture,
                      ])
                    ">
                    查看
                  </view>
                </view>
              </view>
            </view>
            <view class="rt">
              <image :src="
                  detail.policeCheckTaskInfo.policeUserImage
                    ? imgPrefix + detail.policeCheckTaskInfo.policeUserImage
                    : baseImgUrl + 'queryFace-01.png'
                " mode="aspectFill" @click="
                  pvwImage([
                    detail.policeCheckTaskInfo.policeUserImage
                      ? imgPrefix + detail.policeCheckTaskInfo.policeUserImage
                      : baseImgUrl + 'queryFace-01.png',
                  ])
                "></image>
            </view>
          </view>
        </view>

        <view style="padding: 25rpx 0"><u-line></u-line></view>

        <view class="wrapper-barBlur">
          <view class="wrapper-bartitle"> 复查记录 </view>
          <!-- <view class="wrapper-details"
            :data-url="`/goOverBag/belowtheMark/nonGoover?taskId=${detail.policeCheckTaskInfo.policeCheckTaskId}&moneyFlag=0&reviewFlag=0`"
            @click="handleClickRouter">
            <u-icon name="attach" color="#2488F5"></u-icon>查看检查详情
          </view> -->
        </view>
        <view class="wrapper-body">
          <view class="wrapper-facility">
            <view class="facility-item">
              <view class="textAlign label">复查类型：</view>
              <view class="value valueName">
                {{ detail.policeCheckTaskInfo.industryExamineName || "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">复查内容：</view>
              <view class="value valueName look"
                :data-url="`/keepArecord/reviewContent/reviewContent?taskId=${options.taskId}`"
                @click="handleClickRouter">
                查看
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">复查时间：</view>
              <view class="value valueName">
                {{ detail.policeCheckTaskInfo.checkTime || "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">复查结果：</view>
              <view class="value valueName checkNo">
                {{
                  detail.policeCheckTaskInfo.checkResult == 1
                    ? "合格"
                    : "不合格"
                }}
              </view>
              <view class="look lookLink"
                :data-url="`/goOverBag/belowtheMark/nonGooverDetails?taskId=${detail.policeCheckTaskInfo.id}`"
                @click="handleClickRouter">查看详情></view>
            </view>

            <view class="signature">
              <view>责任人签名：</view>
              <image :src="
                  detail.policeCheckTaskInfo.principalSignatureUrl
                    ? imgPrefix +
                      detail.policeCheckTaskInfo.principalSignatureUrl
                    : baseImgUrl + 'queryFace-01.png'
                " mode="aspectFill" style="background: #f9f9f9"></image>
            </view>
          </view>
        </view>

        <view class="wrapper-barBlur">
          <view class="wrapper-bartitle"> 处罚结果 </view>
        </view>
        <view class="wrapper-body">
          <view class="wrapper-facility">
            <view class="facility-item">
              <view class="textAlign label">处罚内容：</view>
              <view class="value valueName">
                {{
                  detail.policeCheckUnqualifiedInfo.rectificationType == 1
                    ? "限期整改"
                    : "停业整顿"
                }}
                <block v-if="detail.policeCheckUnqualifiedInfo.isFined != 0">
                  ,罚款{{ detail.policeCheckUnqualifiedInfo.finedMoney }}元
                </block>
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">截止日期：</view>
              <view class="value valueName">
                {{ detail.policeCheckUnqualifiedInfo.penaltyEndTime ? moment(detail.policeCheckUnqualifiedInfo.penaltyEndTime).format('YYYY/MM/DD') + ' 23:59:59' : "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">电子文书：</view>
              <view class="value valueName look"
                :data-url="`/keepArecord/textBooks/textBooks?id=${detail.policeCheckUnqualifiedInfo.id}&checkBookid=${checkBookid}&fronttype=2`"
                @click="handleClickRouter">
                查看
              </view>
            </view>
          </view>
        </view>

        <block v-if="isReceipt != 0 && moneyFlag">
          <view style="padding: 20rpx 0"><u-line></u-line></view>
          <view class="wrapper-barBlur">
            <view class="wrapper-bartitle"> 企业回执详情 </view>
          </view>

          <view class="wrapper-body handling">
            <view class="wrapper-facility">
              <view class="facility-item">
                <view class="textAlign label">提交时间：</view>
                <view class="value valueName">
                  {{ detail.policeCheckHandleInfo.receiptTime || "" }}
                </view>
              </view>
              <view class="facility-item" v-if="detail.payRecordInfo">
                <view class="textAlign label">缴纳罚款：</view>
                <view class="value valueName">
                  {{ detail.payRecordInfo.payMoney || "0" }}元（已缴纳）
                </view>
              </view>
              <view class="facility-item">
                <view class="textAlign label">回执说明：</view>
                <view class="value valueName">
                  {{ detail.policeCheckHandleInfo.receiptContent || "" }}
                </view>
              </view>
              <view class="facility-item" v-bind:style="{display: flexVal}">
                <view class="textAlign label">回执图片：</view>
                <view v-if="detail.policeCheckHandleInfo.handleImageInfoList.length" class="fine-money" :class="
                    detail.policeCheckHandleInfo.handleImageInfoList.length <= 2
                      ? 'fineAfter'
                      : ''
                  ">
                  <image v-for="(img, indexImg) in detail.policeCheckHandleInfo
                      .handleImageInfoList" :key="indexImg" :src="imgPrefix + img.path" mode="aspectFill"
                    @click="pvwImage([imgPrefix + img.path])"></image>
                </view>
                <view v-else class="value valueName">
                  暂无
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>

    <view class="btns" v-if="isReceipt == 0 && reviewFlag && ['mini'].includes(role)">
      <!-- 没有申诉了 保留着不要删 <button
        v-if="!detail.policeCompanyComplainInfo"
        class="appealdetail-btn lt"
        type="primary"
        :data-url="`/keepArecord/nonRecord/complainRecord?id=${detail.policeCheckTaskInfo.id}`"
        @click="handleClickRouter"
      >
        申诉
      </button> -->
      <button class="submit-btn lookbtn widthOnehundred" type="primary" :data-url="`/keepArecord/nonRecord/disposeRecord?data=${encodeURIComponent(
          JSON.stringify(detail)
        )}`" @click="handleClickRouter">
        处理
        <!-- :class="detail.policeCompanyComplainInfo ? 'widthOnehundred' : ''" -->
      </button>
    </view>
  </view>
</template>

<script>
  import {
    findTaskDetail
  } from "@/api/goover.js";
  import {
    handleClickRouter,
    pvwImage
  } from "@/utils/util.js";
  import moment from "../../utils/moment";
  import {
    getRole
  } from "../../config";

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        options: {},
        detail: {},
        moneyFlag: true, //处理情况  是否展示
        imgPrefix: uni.getStorageSync("imgPrefix"),
        isReceipt: 0, // 是否申诉 0.否 1.是
        reviewFlag: true, //复查记录 到 检查详情  不展示申诉/处理按钮
        checkBookid: "",
        role: getRole()
      };
    },
    computed: {
      flexVal() {
        return this.detail.policeCheckHandleInfo.handleImageInfoList.length ? 'block' : 'flex'
      }
    },
    onLoad(options) {
      this.options = options;
      if (options.moneyFlag) {
        this.moneyFlag = Boolean(+options.moneyFlag);
      }
      if (options.reviewFlag) {
        this.reviewFlag = Boolean(+options.reviewFlag);
      }

      this.getList();
    },
    methods: {
      moment,
      handleClickRouter,
      pvwImage,
      getList() {
        findTaskDetail({
          taskId: this.options.taskId
        }).then((res) => {
          if (res.code == 200) {
            this.detail = res.result;
            this.isReceipt = res.result.policeCheckHandleInfo.isReceipt;

            this.checkBookid = res.result.policeCheckUnqualifiedInfo.id;
          }
          // return res.result.policeCheckTaskInfo.policeCheckTaskId;
        });
        // .then((res2) => {
        //   // 取检查的id  电子文书页面要用到
        //   findTaskDetail({ taskId: res2 }).then((checkRes) => {
        //     this.checkBookid = checkRes.result.policeCheckUnqualifiedInfo.id;
        //   });
        // });
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .nonRecord {
    flex: 1;
    background-color: #f3f3f3;
    margin-bottom: 50px;

    .bgColor {
      width: 100%;
      height: 240rpx;
      background: #2488f5;
    }

    .nonRecord-title {
      position: absolute;
      top: 10rpx;
      left: 6%;
      color: #ffffff;
      font-size: 34rpx;
      font-weight: bold;
    }

    .wrapper {
      position: absolute;
      top: 30rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 50px;

      .blueTitle {
        padding: 20rpx 40rpx;
        border-radius: 10rpx 10rpx 0 0;
        color: #333333;
        font-size: 30rpx;
        font-weight: bold;
        background: #ecf9ff;
      }

      .wrapper-item {
        margin-bottom: 2vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
        border-radius: 10rpx;
        width: 702rpx;

        .wrapper-bar {
          display: flex;
          justify-content: space-between;
          height: 40rpx;

          .wrapper-bartitle {
            font-size: 30rpx;
            font-weight: bold;

            text {
              display: inline-block;
              margin-left: 8px;
              color: #ababab;
              font-size: 28rpx;
            }
          }
        }

        .wrapper-body {
          padding-top: 20px;

          .label-recheck {
            width: 165rpx;
          }

          .label-i {
            color: #a1a1a1;
          }
        }

        .handling {
          color: #212020;

          .fine-money {
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;

            image {
              display: block;
              width: 190rpx;
              height: 180rpx;
            }

            .rmb {
              color: #212020;
              font-size: 26rpx;
              font-weight: bold;
            }

            .time {
              display: inline-block;
              padding-right: 10rpx;
              font-size: 24rpx;
              color: #bbbbbb;
            }
          }

          .fine-money:last-child {
            padding-bottom: 0rpx;
          }

          .fineAfter::after {
            content: "";
            width: 190rpx;
          }
        }

        .text-picture {
          display: flex;

          .lt {
            width: 425rpx;
            max-width: 425rpx;

            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              margin-bottom: 17rpx;
              margin-top: 20rpx;
            }
          }

          .rt {
            width: 200rpx;
            height: 220rpx;
            margin-left: 20rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .wrapper-zero {
        border-radius: 0 0 10rpx 10rpx;
      }
    }

    .wrapper-audit {
      height: calc(100vh - 84px);
      overflow-y: auto;
    }

    .btns {
      position: absolute;
      width: 100%;
      bottom: 0;

      .widthOnehundred {
        width: 100%;
      }
    }
  }
</style>